<!--
 * @Date: 2022-04-07 14:05:27
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-22 23:13:26
 * @FilePath: \weibovue\src\components\GoTop.vue
 * @Description: 返回顶部组件
-->
<template>
  <div>
    <div
      class="GoTop"
      :class="showGoTop ? 'showBtn' : 'hideBtn'"
      @click="goTop"
    >
      <i class="iconfont icon-huidaodingbu"></i>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";

import useScroll from "../hooks/useScroll";
const goTop = () => {
  document.querySelector("html")!.scrollTo({
    behavior: "smooth",
    top: 910,
  });
};
const { isFlag } = useScroll(910);
let showGoTop = ref(false);
watch(
  () => isFlag.value,
  (val) => {
    showGoTop.value = val;
  },
);
</script>
<style lang="less" scoped>
.GoTop {
  position: fixed;
  background-color: rgb(228, 227, 227);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 10000;
  cursor: pointer;
  bottom: -50px;
  right: 20px;
  i {
    font-size: 24px;
    color: #000;
  }
  &:hover {
    box-shadow: 0 20px 25px -8px rgba(0, 0, 0, 0.1),
      0 10px 10px -8px rgba(0, 0, 0, 0.04);
  }
  &:hover i {
    color: #ff8200;
  }
}
.showBtn {
  animation: showBtn 0.7s ease;
  animation-fill-mode: forwards;
}

.hideBtn {
  animation: hideBtn 0.3s ease-in;
  animation-fill-mode: forwards;
}

@keyframes showBtn {
  0% {
    bottom: -50px;
  }
  50% {
    bottom: 120px;
  }
  100% {
    bottom: 100px;
  }
}

@keyframes hideBtn {
  from {
    bottom: 100px;
  }
  to {
    bottom: -50px;
  }
}
</style>
